<template>
	<!-- 活动详情 -->
	<view>
		<view v-if="!dataMsg" class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
		<view v-else class="cont_box">
			<image class="big_img" :src="dataMsg.img_path" mode=""></image>
			<view class="p-2 bg-white">
				<view class="h4 font-weight-bolder">{{ dataMsg.title }}</view>
				<view class="c_9 font_24 my-1">
					<text class="mr-3">活动时间：{{ dataMsg.start_time }}</text>
				</view>
			</view>
			<view class="bg-white mt-2 p-2">
				<view v-if="!dataMsg.content" class="p-4 m-auto"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无内容"></u-empty></view>
				<view class="view cont" v-else><u-parse :content="dataMsg.content" style="padding-bottom: 180rpx;"></u-parse></view>
				<!-- <view class="order_box py-3 px-2" v-if="dataMsg.yuyue != 1">
					<button
						class="order text-white h6"
						:class="{ active: dataMsg.status == 2 }"
						:disabled="dataMsg.status == 2 ? true : false"
						@click="orderBtn(dataMsg)"
						:loading="btnLoad"
					>
						{{ dataMsg.hdname || '立即预约' }}
					</button>
				</view> -->
			</view>
		</view>
		<canvas canvas-id="canvas" style="position: absolute; top: -1000px; left: -1000px;width: 225px; height: 180px;"></canvas>
	</view>
</template>

<script>
import { activityInfo, makeactivity } from '@/api/home/nav/activity.js';
import util from '@/common/js/util.js';
export default {
	data() {
		return {
			dataMsg: {},
			btnLoad: false,
			isOrder: true,
			activetyId: '' //活动id
		};
	},
	onLoad(option) {
		// console.log(option);
		this.activetyId = option.id;
		this.getInfo();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	//分享到聊天
	onShareAppMessage(res) {
		let shareMessage = {
			title: this.dataMsg.title,
			path: '/subPages/exhibition/activity/activety_detail?id=' + this.activetyId, //界面路径
			imageUrl: this.dataMsg.img_path
		};
		return new Promise((resolve, reject) => {
			uni.showLoading({
				title: '请求分享数据中...',
				icon: 'none'
			});
			util.makeCanvas(shareMessage.imageUrl)
				.then(imgPath => {
					uni.hideLoading();
					resolve({
						title: shareMessage.title,
						path: shareMessage.path,
						imageUrl: imgPath
					});
				})
				.catch(err => {
					// console.log('err', err);
					uni.hideLoading();
					resolve(shareMessage);
				});
		});
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.dataMsg.title,
			path: '/subPages/exhibition/activity/activety_detail?id=' + this.activetyId, //界面路径
			imageUrl: this.dataMsg.img_path
		};
	},
	methods: {
		getInfo() {
			let msg = {
				id: parseInt(this.activetyId),
				uid: uni.getStorageSync('userInfo').userId || ''
			};
			activityInfo(msg)
				.then(res => {
					if (res.code == 0) {
						this.dataMsg = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取活动详情失败', err);
				});
		},
		// 马上预约
		orderBtn(val) {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin(); // 未登录
			} else {
				// console.log('==', val);
				var msg = {
					id: val.id,
					uid: uni.getStorageSync('userInfo').userId || ''
				};
				// status 0活动未开始 1活动已开始 2活动已结束
				// yuyue 1已参加活动 2马上预约 3 取消预约 4加入活动
				if (val.yuyue == 3) {
					msg = {
						status: 2, //取消预约
						...msg
					};
					uni.showModal({
						title: '提示',
						content: '确认要取消预约吗？',
						success: res => {
							if (res.confirm) {
								this.btnLoad = true;
								this.joniActive(msg);
							} else {
								return;
							}
						}
					});
				} else {
					this.btnLoad = true;
					this.joniActive(msg);
				}
			}
		},
		joniActive(msg) {
			makeactivity(msg)
				.then(res => {
					if (res.code == 0) {
						this.getInfo();
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取活动详情失败', err);
				})
				.finally(() => {
					this.btnLoad = false;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.cont_box {
	width: 100%;
	position: relative;
	.big_img {
		width: 100%;
		height: 300rpx;
		border-radius: 0;
	}
	.cont {
		padding-bottom: 150rpx;
	}
	.order_box {
		width: 95%;
		position: fixed;
		bottom: 0;
		background-color: $color2;
		margin-top: 100rpx;
		.order {
			background: linear-gradient(-26deg, #cf1526, #d73342);
			box-shadow: 0px 0px 2px 0px rgba(195, 195, 195, 0.5);
			border-radius: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
}
.active {
	background: #c8c8c8 !important;
}
</style>
